<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/jquery.range.css">
	<style type="text/css" media="screen">
		.top{
			width: 100%;
			background: #fff;
		}
		.slider-container {
			margin: .54rem auto;
		}
		.slider-container .scale ins{
			font-size: .24rem;
			color: #999999;
			top: .2rem;
		}
		.slider-container .back-bar .pointer-label{
			top: -.6rem;
			font-size: .32rem;
			background: none;
		}
		.theme-green .back-bar,.slider-container .scale span {
			height: .12rem;
			background: #eee;
		}
		.theme-green .back-bar .pointer{
			border-radius: 100%;
    		border: none;
    		box-shadow: 0 0 3px 0 rgba(0,0,0,0.19);
    		background:#fff;
			width: .44rem;
			height: .44rem;
			top: 50%;
			transform: translate(0,-50%);
			-webkit-transform: translate(0,-50%);
			-moz-transform: translate(0,-50%);
		}
		.theme-green .back-bar .selected-bar{
			background:#ff5658;
		}
		.sign-timer{
			padding: .54rem 0;
			text-align: center;
			color: #999999;
			font-size: .24rem;
		}
		.more-footer{
			padding:1rem 0 0;
			margin: 0 auto;
		}
		.more-footer>p{
			float: left;
			padding: .26rem 0;
		  	width:50%;
			text-align: center;
		  	font-size: .28rem;
			background: #fff ;
			color: #666666;
		  	border-top:1px solid #F5F5F5 ;
		}
		.more-footer>p.more-sure{
		  color: #fff;
		  background: #FF5658 ;
		}
	</style>
</head>
<body>
<div id="layout">
	<div class="top">
		<p class="sign-timer">（滑动刻度条两端按钮选择时间范围）</p>
		<input type="hidden" class="slider-input" value="1,18" />
		<div class="more-footer clearfix">
			<p class="clear-check">清空条件</p>
			<p class="sure-check more-sure">确定</p>
		</div>
	</div>
	
</div>
	
</body>
<script src="plugins/jquery.min.js"></script>
<script src="plugins/jquery.range.js"></script>
<script type="text/javascript">
var screenW=$('#layout').width() * 0.8;
// var monthList=["2016.01","2016.02","2016.03","2016.04","2016.05","2016.06","2016.07","2016.08","2016.09","2016.10","2016.11","2016.12"];
// var arr=[];
// for(var i=1;i<25;i++){
// 	if(i>12){
// 		if((i-12)<10){
// 			arr.push("2017."+'0'+(i-12));
// 		}else{
// 			arr.push("2017."+(i-12));
// 		}		
// 	}else{
// 		if(i<10){
// 			arr.push("2016."+'0'+i);
// 		}else{
// 			arr.push("2016."+i);
// 		}
		
// 	}
// }
var year=2016;
var month="";
$('.slider-input').jRange({
    from: 1,
    to: 24,
    step: 1,
    scale: ["2016.01","2016.12","2017.12"],
    format:function(value,pointer){
    	// console.log(value);
    	if(value<=12){
    		if(value<10){
    			value='0'+value;
    		}
    		month=value;
    	}else{
    		month=value-12;
    		if(month<10){
    			month='0'+month;
    		}
    	};
    	if(value>12){
    		year=2017;
    	}else{
    		year=2016;
    	}
    	// console.log(month);
    	return year+"."+month;
    },
    onstatechange:function(value,pointer){
    	if(value.split(",")[0]>12){
    		year=2017;
    	}else{
    		year=2016;
    	}
    },
    width: screenW,
    showLabels: true,
    isRange : true
});
</script>
</html>